<template>
	<n-tabs
		:value="betslipStore.tab"
		@before-leave="handleBeforeLeave"
		@update:value="betslipStore.changeTab"
		size="large"
		justify-content="space-evenly"
		animated>
		<n-tab :name="BetslipTab.Single" :tab="$t('BettingMethod.single')"></n-tab>
		<n-tab :name="BetslipTab.Combo" :tab="$t('BettingMethod.combo')"></n-tab>
		<n-tab :name="BetslipTab.Follow" :tab="$t('feed.followBet')"></n-tab>
	</n-tabs>
</template>

<script lang="ts" setup>
import { useBetslipStore } from '@/store'
import { NTabs, NTab } from 'naive-ui'
import { BetslipTab } from '@/types'
import { isTransition } from '@/utils'

const betslipStore = useBetslipStore()

const handleBeforeLeave = () => {
	if (betslipStore.tab === BetslipTab.Single) {
		return betslipStore.list.every((item) => !isTransition(item.status))
	} else if (betslipStore.tab === BetslipTab.Combo) {
		return !isTransition(betslipStore.combo.status)
	}
	return true
}
</script>
